<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工业屏交易平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2b6de5;
            --secondary-color: #3c8cff;
            --accent-color: #ff7d00;
            --success-color: #34c759;
            --light-bg: #f8f9fa;
            --border-color: #eaeaea;
            --text-primary: #333;
            --text-secondary: #666;
            --text-light: #999;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--text-primary);
            font-size: 14px;
            line-height: 1.5;
            padding-bottom: 60px;
        }
        
        .container {
            max-width: 480px;
            margin: 0 auto;
            background: white;
            min-height: 100vh;
            box-shadow: 0 0 15px rgba(0,0,0,0.05);
            position: relative;
            overflow-x: hidden;
        }
        
        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px;
            position: relative;
            z-index: 10;
        }
        
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .logo {
            font-weight: bold;
            font-size: 18px;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            margin-right: 8px;
            font-size: 20px;
        }
        
        .actions {
            display: flex;
            gap: 15px;
        }
        
        .actions i {
            font-size: 18px;
        }
        
        .search-box {
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
        }
        
        .search-box i {
            margin-right: 8px;
            color: rgba(255,255,255,0.8);
        }
        
        .search-box input {
            background: transparent;
            border: none;
            color: white;
            width: 100%;
            font-size: 14px;
        }
        
        .search-box input::placeholder {
            color: rgba(255,255,255,0.7);
        }
        
        /* Banner 轮播图 */
        .banner {
            margin: 15px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            height: 150px;
            position: relative;
        }
        
        .banner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .banner-indicators {
            position: absolute;
            bottom: 10px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 6px;
        }
        
        .banner-indicator {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
        }
        
        .banner-indicator.active {
            background: white;
        }
        
        /* 快捷入口 - 突出核心功能 */
        .quick-access {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            padding: 0 15px;
            margin-bottom: 20px;
        }
        
        .quick-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: white;
            border-radius: 10px;
            padding: 15px 5px;
            box-shadow: 0 5px 15px rgba(43, 109, 229, 0.15);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(43, 109, 229, 0.1);
        }
        
        .quick-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--primary-color);
        }
        
        .quick-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(43, 109, 229, 0.2);
        }
        
        .quick-item i {
            font-size: 28px;
            margin-bottom: 10px;
            position: relative;
            z-index: 2;
        }
        
        .quick-item:nth-child(1) i { 
            color: #ff6b6b; 
            background: linear-gradient(to right, #ff6b6b, #ff8e8e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .quick-item:nth-child(2) i { 
            color: #4cd964; 
            background: linear-gradient(to right, #4cd964, #6ce881);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .quick-item:nth-child(3) i { 
            color: #ff9500; 
            background: linear-gradient(to right, #ff9500, #ffaa33);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .quick-item:nth-child(4) i { 
            color: #5ac8fa; 
            background: linear-gradient(to right, #5ac8fa, #7ad5ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .quick-item span {
            font-size: 14px;
            color: var(--text-primary);
            font-weight: 600;
            position: relative;
            z-index: 2;
        }
        
        /* 功能区域 */
        .section {
            background: white;
            margin: 15px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .section-title {
            font-size: 16px;
            font-weight: bold;
            color: var(--text-primary);
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 8px;
            color: var(--primary-color);
        }
        
        .section-more {
            color: var(--text-light);
            font-size: 13px;
        }
        
        .section-content {
            padding: 15px;
        }
        
        /* 使用说明提示 */
        .tip-container {
            margin: 15px;
            padding: 15px;
            background: linear-gradient(to right, rgba(43, 109, 229, 0.1), rgba(60, 140, 255, 0.1));
            border-radius: 12px;
            border-left: 4px solid var(--primary-color);
        }
        
        .tip-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .tip-header i {
            font-size: 18px;
            color: var(--primary-color);
            margin-right: 8px;
        }
        
        .tip-header h3 {
            font-size: 15px;
            color: var(--primary);
        }
        
        .tip-content {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }
        
        .tip-item {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-radius: 8px;
            background: white;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }
        
        .tip-item i {
            font-size: 20px;
            color: var(--primary-color);
            margin-bottom: 8px;
        }
        
        .tip-item span {
            font-size: 13px;
            color: var(--text-primary);
        }
        
        /* 奖品兑换 */
        .prizes {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        
        .prize-item {
            background: var(--light-bg);
            border-radius: 8px;
            overflow: hidden;
            text-align: center;
            padding: 10px;
            transition: all 0.3s ease;
        }
        
        .prize-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 10px rgba(0,0,0,0.08);
        }
        
        .prize-img {
            height: 70px;
            background: #e9ecef;
            border-radius: 6px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            font-size: 12px;
        }
        
        .prize-name {
            font-size: 12px;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .prize-points {
            color: var(--accent-color);
            font-weight: bold;
            font-size: 13px;
        }
        
        /* 供应产品 */
        .products {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .product-item {
            display: flex;
            gap: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }
        
        .product-item:hover {
            background: rgba(43, 109, 229, 0.03);
            border-radius: 8px;
            padding: 8px;
            transform: translateX(3px);
        }
        
        .product-item:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        
        .product-img {
            width: 90px;
            height: 90px;
            background: #e9ecef;
            border-radius: 8px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            font-size: 12px;
        }
        
        .product-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .product-title {
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 15px;
        }
        
        .product-desc {
            color: var(--text-secondary);
            font-size: 13px;
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        
        .product-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-light);
            font-size: 12px;
        }
        
        .product-price {
            color: var(--accent-color);
            font-weight: bold;
        }
        
        /* 求购列表 */
        .demands {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .demand-item {
            background: #f9fbfd;
            border-radius: 8px;
            padding: 12px;
            border-left: 3px solid var(--success-color);
            box-shadow: 0 2px 6px rgba(0,0,0,0.03);
        }
        
        .demand-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .demand-title {
            font-weight: bold;
            font-size: 15px;
            color: var(--text-primary);
        }
        
        .demand-status {
            background: var(--success-color);
            color: white;
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        
        .demand-content {
            color: var(--text-secondary);
            font-size: 13px;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .demand-meta {
            display: flex;
            justify-content: space-between;
            color: var(--text-light);
            font-size: 12px;
        }
        
        .demand-company {
            display: flex;
            align-items: center;
        }
        
        .demand-company i {
            margin-right: 5px;
            color: var(--primary-color);
        }
        
        /* 底部导航 */
        .tabbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            border-top: 1px solid var(--border-color);
            z-index: 100;
            max-width: 480px;
            margin: 0 auto;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 8px 0;
            color: var(--text-light);
            font-size: 11px;
        }
        
        .tab-item.active {
            color: var(--primary-color);
        }
        
        .tab-item i {
            font-size: 20px;
            margin-bottom: 3px;
        }
        
        /* 免责声明 */
        .disclaimer {
            text-align: center;
            padding: 15px;
            color: var(--text-light);
            font-size: 12px;
        }
        
        .disclaimer a {
            color: var(--primary-color);
            text-decoration: none;
        }
        
        .badge {
            background: var(--accent-color);
            color: white;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 5px;
            vertical-align: middle;
        }
        
        .section-divider {
            height: 10px;
            background: #f5f7fa;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部区域 -->
        <div class="header">
            <div class="top-bar">
                <div class="logo">
                    <i class="fas fa-industry"></i>
                    <span>工业屏交易平台</span>
                </div>
                <div class="actions">
                    <i class="fas fa-bell"></i>
                    <i class="fas fa-user"></i>
                </div>
            </div>
            
            <div class="search-box">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索产品型号、材料名称或库存...">
            </div>
        </div>
        
        <!-- Banner轮播图 -->
        <div class="banner">
            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='150' viewBox='0 0 400 150'%3E%3Crect fill='%232b6de5' width='400' height='150'/%3E%3Ctext fill='%23ffffff' font-family='Arial' font-size='18' x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'%3EBanner轮播图区域%3C/text%3E%3C/svg%3E" alt="Banner">
            <div class="banner-indicators">
                <div class="banner-indicator active"></div>
                <div class="banner-indicator"></div>
                <div class="banner-indicator"></div>
            </div>
        </div>
        
        <!-- 快捷入口 - 核心功能突出显示 -->
        <div class="quick-access">
            <div class="quick-item">
                <i class="fas fa-box-open"></i>
                <span>找库存</span>
            </div>
            <div class="quick-item">
                <i class="fas fa-layer-group"></i>
                <span>找材料</span>
            </div>
            <div class="quick-item">
                <i class="fas fa-shopping-cart"></i>
                <span>发布求购</span>
            </div>
            <div class="quick-item">
                <i class="fas fa-handshake"></i>
                <span>发布合作</span>
            </div>
        </div>
        
        <!-- 使用说明提示 -->
        <div class="tip-container">
            <div class="tip-header">
                <i class="fas fa-lightbulb"></i>
                <h3>快速上手指南</h3>
            </div>
            <div class="tip-content">
                <div class="tip-item">
                    <i class="fas fa-edit"></i>
                    <span>发布活动</span>
                </div>
                <div class="tip-item">
                    <i class="fas fa-cart-plus"></i>
                    <span>发布求购</span>
                </div>
                <div class="tip-item">
                    <i class="fas fa-check-circle"></i>
                    <span>求购接单</span>
                </div>
            </div>
        </div>
        
        <!-- 最新求购 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">
                    <i class="fas fa-tag"></i>
                    <span>最新求购</span>
                    <span class="badge">新</span>
                </div>
                <div class="section-more">查看更多</div>
            </div>
            <div class="section-content">
                <div class="demands">
                    <div class="demand-item">
                        <div class="demand-header">
                            <div class="demand-title">求购单面胶带(工业级)</div>
                            <div class="demand-status">进行中</div>
                        </div>
                        <div class="demand-content">
                            需要500卷工业级单面胶带，宽度50mm，厚度0.15mm，耐高温材料
                        </div>
                        <div class="demand-meta">
                            <div class="demand-company">
                                <i class="fas fa-building"></i>
                                <span>鑫辉模切厂</span>
                            </div>
                            <div>浙江 · 杭州</div>
                        </div>
                    </div>
                    
                    <div class="demand-item">
                        <div class="demand-header">
                            <div class="demand-title">长期采购OCA光学胶</div>
                            <div class="demand-status">接单中</div>
                        </div>
                        <div class="demand-content">
                            每月需求2000平方米OCA光学胶，要求透光率92%以上，无气泡
                        </div>
                        <div class="demand-meta">
                            <div class="demand-company">
                                <i class="fas fa-building"></i>
                                <span>光科电子</span>
                            </div>
                            <div>江苏 · 苏州</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 最新供应 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">
                    <i class="fas fa-box"></i>
                    <span>最新供应</span>
                </div>
                <div class="section-more">查看更多</div>
            </div>
            <div class="section-content">
                <div class="products">
                    <div class="product-item">
                        <div class="product-img">单面胶带</div>
                        <div class="product-info">
                            <div>
                                <div class="product-title">单面胶带（工业级）</div>
                                <div class="product-desc">高品质单面胶带，适用于多种工业场景，耐高温，粘性强。</div>
                                <div class="product-meta">
                                    <div>鑫源材料厂</div>
                                    <div>浙江 · 杭州</div>
                                </div>
                            </div>
                            <div class="product-price">¥ 35.8/卷</div>
                        </div>
                    </div>
                    <div class="product-item">
                        <div class="product-img">光学材料</div>
                        <div class="product-info">
                            <div>
                                <div class="product-title">光学级OCA胶</div>
                                <div class="product-desc">高透光率，低雾度，适用于触摸屏和显示屏贴合。</div>
                                <div class="product-meta">
                                    <div>光科材料</div>
                                    <div>江苏 · 苏州</div>
                                </div>
                            </div>
                            <div class="product-price">¥ 128.0/㎡</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 奖品兑换 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">
                    <i class="fas fa-gift"></i>
                    <span>积分兑换</span>
                    <span class="badge">热</span>
                </div>
                <div class="section-more">更多奖品</div>
            </div>
            <div class="section-content">
                <div class="prizes">
                    <div class="prize-item">
                        <div class="prize-img">工业手套</div>
                        <div class="prize-name">防护手套</div>
                        <div class="prize-points">200积分</div>
                    </div>
                    <div class="prize-item">
                        <div class="prize-img">工具箱</div>
                        <div class="prize-name">多功能工具箱</div>
                        <div class="prize-points">500积分</div>
                    </div>
                    <div class="prize-item">
                        <div class="prize-img">VR拍摄</div>
                        <div class="prize-name">VR视频拍摄</div>
                        <div class="prize-points">800积分</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 免责声明 -->
        <div class="disclaimer">
            <a href="#">免责申明</a> | <a href="#">隐私条款</a>
        </div>
        
        <!-- 底部导航 -->
        <div class="tabbar">
            <div class="tab-item active">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-search"></i>
                <span>求购</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-plus-circle"></i>
                <span>发布</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-warehouse"></i>
                <span>供应</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 模拟轮播图切换
        setInterval(() => {
            const indicators = document.querySelectorAll('.banner-indicator');
            let activeIndex = 0;
            
            indicators.forEach((indicator, index) => {
                if(indicator.classList.contains('active')) {
                    activeIndex = index;
                    indicator.classList.remove('active');
                }
            });
            
            activeIndex = (activeIndex + 1) % indicators.length;
            indicators[activeIndex].classList.add('active');
        }, 3000);
        
        // 核心功能按钮悬停效果
        document.querySelectorAll('.quick-item').forEach(item => {
            item.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-5px)';
            });
            
            item.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0)';
            });
        });
    </script>
</body>
</html>